<template>
  <div class="app-container">
    <el-row :gutter="10" style="height: 100%">
      <el-col :span="5">
        <div class="search-container">
          <el-form ref="queryParamsRef" :inline="true" :model="patientQueryParams" label-width="60px">
            <el-form-item label="登记科室" prop="registerDept">
              <el-input
                v-model="patientQueryParams.registerDept"
                clearable
                placeholder="请输入输患者信息"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="患者信息" prop="itemInfo">
              <el-input
                v-model="patientQueryParams.itemInfo"
                clearable
                placeholder="请输入输患者信息"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="登记时间" prop="">
              <el-date-picker v-model="dateRange" :shortcuts="$shortcuts()" :unlink-panels="true"
                              end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期"
                              style="width: 100%" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                              @change="handleQuery"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
            </el-form-item>
          </el-form>
        </div>
        <el-table v-adaptive :border="true" :data="infusionRegisterList" :header-cell-style="$headerCellStyle"
                  :stripe="true" highlight-current-row @row-click="rowClick">
          <el-table-column :align="'left'" :header-align="'center'" label="患者信息" prop="name">
            <template #default="scope">
              <span class="ys-css">{{ scope.row.name }}</span>
              <span class="mr10" style="margin-left: -10px">
                <svg-icon :icon-class="dictStore.getMateDictInfo(
                    dictDataMap['sys_user_sex'],
                    scope.row.sex
                ).dictValue === '1'
                    ? 'man'
                    : 'woman'
                    " style="margin-left: 10px"/>
              </span>
              {{ scope.row.ageAll }}
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="就诊号" prop="clinicNo"/>
          <el-table-column :align="'center'" label="登记科室" prop="registerDeptName"/>
        </el-table>
        <pagination
          v-show="total>0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="getPatientList"
        />
      </el-col>
      <el-col :span="19" style="height: 100%">
        <el-empty v-if="prescriptionItemList.length <= 0" :image-size="200" description="请勾选左侧处方"/>
        <el-row v-else :gutter="10" style="height: 100%">
          <el-col :span="24" style="height: 100%">
            <div style="border: 1px solid #027687; border-radius: 5px; padding: 5px;height: 100%">
              <el-table ref="prescriptionItemListRef" :border="true" :data="prescriptionItemList"
                        :header-cell-style="$headerCellStyle" :stripe="true"
                        height="300px" highlight-current-row
                        @row-click="rowClickItem">
                <el-table-column :align="'center'" label="组号" prop="groupNumberShow" width="90">
                  <template #default="scope">
                    {{ scope.row.groupNumberShow }}
                  </template>
                </el-table-column>
                <el-table-column :align="'left'" label="药品" prop="drugName">
                  <template #default="scope">
                      <span>{{ scope.row.groupNumberStyle }}<span class="ml5 ys-css">{{
                          scope.row.drugName
                        }}</span></span>
                  </template>
                </el-table-column>
                <el-table-column :align="'center'" :show-overflow-tooltip="true" label="规格" prop="packageSpec"
                                 width="140"/>
                <el-table-column :align="'center'" label="途径" prop="channel" width="100">
                  <template #default="scope">
                    <span>{{ scope.row.channelName }}</span>
                  </template>
                </el-table-column>
                <el-table-column :align="'center'" label="单次用量" prop="singleDosage" width="110">
                  <template #default="scope">
                          <span style="margin-left: -15px"> {{ scope.row.singleDosage }}<dict-data-tag
                            :options="dictDataMap['dose_unit']" :value="scope.row.singleUnit"
                            style="margin: -23px -35px 0px 35px"/></span>
                  </template>
                </el-table-column>
                <el-table-column :align="'center'" label="频次" prop="performFreq" width="100">
                  <template #default="scope">
                    <span>{{ scope.row.performFreqName }}</span>
                  </template>
                </el-table-column>
                <el-table-column :align="'center'" label="天数(天)" prop="abidance" width="70">
                  <template #default="scope">
                    <span>{{ scope.row.abidance }}</span>
                  </template>
                </el-table-column>
                <el-table-column :align="'center'" label="数量" prop="num" width="110">
                  <template #default="scope">
                          <span>{{ scope.row.num }} <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.packSize === '1' ?
                            scope.row.minUnits : scope.row.packageUnits" style="margin: -23px -45px 0px 27px"/>
                          </span>
                  </template>
                </el-table-column>
                <el-table-column :align="'center'" label="免皮试" prop="noSkin" width="60">
                  <template #default="scope">
                          <span>
                            <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.noSkin"/>
                          </span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="mt20 ml10 mr5 mb20" style="overflow-y: auto;height: calc(100vh - 450px)">
                <el-empty v-if="infusionRecordList.length <= 0" :image-size="200"
                          description="请点击顶部列表中的药品数据"/>
                <template v-for="(item,index) in infusionRecordList" v-else :key="index">
                  <el-col :span="24" class="mb10" style="border: 1px solid #c4c4c4;">
                    <span style="margin-left: 100px">序号：{{ Number(index) + 1 }}</span>
                    <el-steps
                      :active="item.operatorType"
                      align-center finish-status="success"
                      process-status="finish">
                      <el-step title="配液">
                        <template #description>
                            <span v-if="item.distributionTime">
                              <div>操作人：{{ item.distributionNurseName }}</div>
                              <div>操作时间：{{ item.distributionTime }}</div>
                            </span>
                          <span v-else>
                              <span class="mb5" type="primary">未操作</span>
                            </span>
                        </template>
                      </el-step>
                      <el-step title="穿刺">
                        <template #description>
                            <span v-if="item.punctureTime">
                              <div>操作人：{{ item.punctureNurseName }}</div>
                              <div>操作时间：{{ item.punctureTime }}</div>
                            </span>
                          <span v-else>
                              <span class="mb5" type="primary">未操作</span>
                            </span>
                        </template>
                      </el-step>
                      <el-step title="输液开始时间">
                        <template #description>
                            <span v-if="item.infusionStartTime">
                              <div>操作人：{{ item.distributionNurseName }}</div>
                              <div>操作时间：{{ item.infusionStartTime }}</div>
                            </span>
                          <span v-else>
                              <span class="mb5" type="primary">未操作</span>
                            </span>
                        </template>
                      </el-step>
                      <el-step title="换液拔针">
                        <template #description>
                            <span v-if="item.pullNeedleTime">
                              <div>操作人：{{ item.pullNeedleNurseName }}</div>
                              <div>操作时间：{{ item.pullNeedleTime }}</div>
                            </span>
                          <span v-else>
                            <span class="mb5" type="primary">未操作</span>
                          </span>
                        </template>
                      </el-step>
                      <el-step title="输液结束时间">
                        <template #description>
                            <span v-if="item.infusionEndTime">
                              <div>操作人：{{ item.pullNeedleNurseName }}</div>
                              <div>操作时间：{{ item.infusionEndTime }}</div>
                            </span>
                          <span v-else>
                            <span class="mb5" type="primary">未操作</span>
                          </span>
                        </template>
                      </el-step>
                    </el-steps>
                  </el-col>
                </template>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
export default {
  name: "InfusionRecord"
}
</script>

<script lang="ts" setup>
import {listInfusionRecord, selectPageInfusionRecord} from "@/api/infusion/infusionRecord.ts";
import {
  listInfusionRegisterAndPrescItem,
  listInfusionRegisterInfoList,
  selectPageInfusionRegister
} from "@/api/infusion/infusionRegister.ts";
import {useDictStoreHook} from "@/store/modules/dict.ts";
import {useUserStoreHook} from "@/store/modules/user.ts";

const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo

const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('sys_user_sex', 'dose_unit', 'spec_unit'))

const {proxy} = getCurrentInstance() as any;

const queryParamsRef = ref()
const patientInfo = ref<any>({})
const infusionItemInfo = ref<any>({})
const prescriptionItemList = ref<any>([])
const infusionRecordList = ref<any>([]);
const infusionRegisterList = ref([]);
const date = proxy.$parseTime(new Date(), "{y}-{m}-{d} ");
const dateRange = ref([date + "00:00:00", date + "23:59:59"]);
const total = ref(0);
const patientQueryParams = ref({
  pageNum: 1,
  pageSize: 10,
  itemInfo: "",
  registerDept: "",
  orgId: userInfo.orgId
})

const queryParams = ref<any>({})

function getPatientList() {
  listInfusionRegisterInfoList(proxy.$addDateRange(patientQueryParams.value, dateRange.value)).then((res: any) => {
    infusionRegisterList.value = res.rows;
    total.value = res.total;
  })
}

/** 列表行点击事件 */
function rowClick(row) {
  patientInfo.value = row
  getInfusionItemList()
}

/**
 * 获取登记药品明细list
 */
function getInfusionItemList() {
  infusionRecordList.value = []
  const params = {
    orgId: patientQueryParams.value.orgId,
    clinicId: patientInfo.value.id,
    infusionRegisterId: patientInfo.value.infusionRegisterId
  }
  listInfusionRegisterAndPrescItem(params).then(res => {
    prescriptionItemList.value = []
    res.data.forEach((item: any) => {
      item.singleUnitName = dictStore.getMateDictInfo(dictDataMap.value['dose_unit'], item.singleUnit).dictLabel
      const unit = item.packSize === "1" ? item.minUnits : item.packageUnits
      item.unitName = dictStore.getMateDictInfo(dictDataMap.value['spec_unit'], unit).dictLabel
      prescriptionItemList.value.push(item)
    })
  })
}

function rowClickItem(row) {
  infusionItemInfo.value = row
  queryParams.value.itemId = row.infusionItemId
  getInfusionRecordList()
}

/** 查询输液室记录列表 */
function getInfusionRecordList() {
  listInfusionRecord({itemId: queryParams.value.itemId}).then((res: resType) => {
    infusionRecordList.value = res.data
    infusionRecordList.value.forEach((item: any) => {
      if (item.operatorType === '2') {
        item.operatorType = Number(item.operatorType) + 1
      } else if (item.operatorType === '3') {
        item.operatorType = Number(item.operatorType) + 2
      }
    })
  })
}


/** 搜索按钮操作 */
function handleQuery() {
  patientQueryParams.value.pageNum = 1;
  getPatientList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParamsRef.value.resetFields()
  // proxy.resetForm("queryRef");
  handleQuery();
}

getPatientList();
</script>

<style scoped></style>
